<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button>123</button>
  </div>
  <script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');

  window.onclick = function() {
    console.log('window');
  };
  document.onclick = function() {
      console.log('document');
  };
  document.documentElement.onclick = function() {
      console.log('html');
  };
  document.body.onclick = function() {
      console.log('body');
  }
  div.onclick = function(ev) {
    ev.stopPropagation()
      console.log('outer');
  };
  btn.onclick = function(ev) {
      console.log('inner', this);
  };

  btn.addEventListener('click', function () {
    console.log('bubble', 'btn');
  }, false);

  btn.addEventListener('click', function () {
    console.log('capture', 'btn');
  }, true);
  // div.addEventListener('click', function () {
  //   console.log('bubble', 'div');
  // }, false);
  // div.addEventListener('click', function () {
  //   console.log('capture', 'div');
  // }, true);
  </script>

</body>
</html>